<template>
  <div class="Shoppingtype">
    <div class="Shopping-list">
      <div class="Shopping-list-Choice">
        <div class="round"></div>
      </div>
      <!-- 图片 -->
      <div class="Shopping-list-img">
        <img src="../../../assets/shopping-img/xmi.jpg" alt>
      </div>
      <!-- 文字 -->
      <div class="hopping-list-words">
        <p class="hopping-list-words-top">东北有机红谷黄小米</p>
        <p class="hopping-list-words-botton">2016秋收新东北有机红谷黄小米粒2750g(5.5斤）特产杂粮小米包邮</p>
      </div>
      <div class="money">
        <p class="money-number">￥45</p>
        <p class="number">x1</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShoppingType",
  data() {
    return {};
  }
};
</script>

<style scoped>
.Shopping-list {
  width: 100%;
  height: 2.45rem;
  background: #fff;
}
.Shopping-list-Choice {
  width: 0.8rem;
  height: 100%;
  position: relative;
  float: left;
}
.round {
  border: 1px solid #707070;
  background-color: #ffffff;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  margin-left: 0.35rem;
  position: absolute;
  top: 0.85rem;
}
/* 图片的样式 */
.Shopping-list-img {
  width: 1.9rem;
  height: 2.2rem;
  float: left;
  margin-top: 0.1rem;
  margin-right: 0.4rem;
}
.Shopping-list-img img {
  width: 100%;
  height: 100%;
}
.hopping-list-words {
  width: 3.1rem;
  height: 100%;
  float: left;
  margin-left: 0.2rem;
  margin: 0.2rem 0;
}
.hopping-list-words-top {
  width: 3.1rem;
  height: 0.5rem;
  font-size: 0.28rem;
}
.hopping-list-words-botton {
  width: 3.1rem;
  height: 1.1rem;
  font-size: 0.22rem;
  margin-top: 0.15rem;
  color: #666666;
}
.money {
  width: 1.1rem;
  height: 100%;
  float: left;
  margin-right: 0.2rem;
}
.money-number {
  height: 0.5rem;
  margin-top: 0.2rem;
  color: #de2626;
  text-align: right;
}
.number {
  height: 1.1rem;
  margin-top: 0.1rem;
  font-size: 0.18rem;
  text-align: right;
}
</style>